'use client';

import Image from 'next/image';
import { Pokemon } from '../types/pokemon';

interface PokemonCardProps {
  pokemon: Pokemon;
}

export default function PokemonCard({ pokemon }: PokemonCardProps) {
  return (
    <div className="border rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <div className="p-3 flex flex-col items-center">
        <h2 className="text-lg font-bold mb-1 text-center">{pokemon.name}</h2>
        <div className="relative w-28 h-28 mb-2 flex items-center justify-center">
          <Image
            src={pokemon.sprites.front_default}
            alt={pokemon.name}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            style={{ objectFit: 'contain' }}
            priority
            unoptimized={true}
          />
        </div>
        <div className="text-lg font-bold mb-1">Number：{pokemon.id}</div>
      </div>
    </div>
  );
}
